<template>
    <div class="pageCon">

        <div class="searchBox">
            <van-dropdown-menu :overlay="false">
                <van-dropdown-item v-model="selectAreaId" :options="areaList" @change="selectArea" />
                <!-- <van-dropdown-item v-model="selectAreaId" :options="areaList" /> -->
            </van-dropdown-menu>
            <van-icon name="search" class="searchIcon" />
            <input type="text" v-model="searchShopName" @focus="inputHandle(false)" @blur="inputHandle(true)" clearable
                placeholder="请输入门店名称">
            <span @click="searchHandle">搜索</span>
        </div>
        <div class="bottomBox">
            <div class="itemBox">
                <div>
                    <img src="../../assets/advMobile/shopDetail/shopName.png" alt="">
                    共计店铺
                </div>
                <span>{{ shopTableList.length }}家</span>
            </div>
            <div class="itemBox">
                <div>
                    <van-icon class="tipIcon" color="#C20330" name="location" />
                    已投放
                </div>
                <span>{{ shopAdvNum }}家</span>
            </div>
            <div class="itemBox">
                <div>
                    <van-icon class="tipIcon" color="#03C295" name="location" />
                    未投放
                </div>
                <span>{{ shopUnAdvNum }}家</span>
            </div>
            <div class="itemBox">
                <div>
                    <van-icon class="tipIcon" color="#F6C349" name="location" />
                    已占用
                </div>
                <span>{{ shopZhanAdvNum }}家</span>
            </div>
        </div>

        <div class="myTabBox">
            <div class="myTabTop">
                <div>店铺名称</div>
                <div>区域</div>
                <div>位置</div>
                <div>状态</div>
                <div>操作</div>
            </div>
            <template v-if="shopTableList.length != 0">
                <div class="myTabMain" v-for="( item, index ) in  shopTableList " :key="index">
                    <div>{{ index + 1 }}.{{ item.shopName }}</div>
                    <div>{{ item.shopRegion | getRegion }}</div>
                    <div>{{ item.shopAddr }}</div>
                    <div :class="item.shopStatus == 1 ? 'redNum' : item.shopStatus == 0 ? 'greenNum' : 'yellowNum'">
                        {{ item.shopStatus == 1 ? '已投放' : item.shopStatus == 0 ? '未投放' :
                '已占用'
                        }}
                    </div>
                    <div>
                        <span @click="checkDetail(item, index, 1)" class="btnItem">详情</span>
                        <span @click="checkDetail(item, index, 2)">打卡</span>
                    </div>
                </div>
            </template>
            <div v-else class="emptyBox">
                <img src="../../assets/empty.png" alt="">
            </div>
        </div>


        <!-- 投放按钮   导航栏 -->
        <div class="pageBottomBox">
            <!-- 导航栏 -->
            <div class="navBox">
                <div>
                    <img src="../../assets/advMobile/navIcon/home2.png" alt="">
                    主页
                </div>
                <div @click="toPage">
                    <img src="../../assets/advMobile/navIcon/geren1.png" alt="">
                    我的
                </div>
            </div>
        </div>
        <!-- 门店详情 -->
        <div :class="sheetDia ? ' touBox' : 'hidenTouBox'" @click="popTou">
            <div class=" touCon" @click.stop="popN">
                <div class="touTop">
                    <span>{{ flag == 1 ? '详情' : '打卡' }}</span>
                    <van-icon name="cross" @click="popTou" class="closeIcon"></van-icon>
                </div>
                <!-- 店铺详情 -->
                <div class="shopDetail" v-if="flag == 1">
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/shopName.png" alt="">
                            店铺名称
                        </div>
                        <div>{{ shopInfoDetail.shopName }}</div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/tel.png" alt="">
                            第一印象
                        </div>
                        <div class="shopLable1">{{ shopInfoDetail.shopMainLabel || '暂未设置' }}</div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/area.png" alt="">
                            所处区域
                        </div>
                        <div>{{ shopInfoDetail.shopRegion | getRegion }}</div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/square.png" alt="">
                            店铺面积
                        </div>
                        <div>{{ shopInfoDetail.shopArea || '暂无信息' }}
                            <span v-if="shopInfoDetail.shopArea">
                                m<sup>2</sup>
                            </span>
                        </div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/address.png" alt="">
                            店铺地址
                        </div>
                        <div>{{ shopInfoDetail.shopAddr || '暂无信息' }}</div>
                    </div>
                    <div class=" detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/xiaoFei.png" alt="">
                            消费档次
                        </div>
                        <div>{{ shopInfoDetail.shopLevelText }}</div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/renshu.png" alt="">
                            日平均人数
                        </div>
                        <div>
                            <div>{{ shopInfoDetail.shopDayNum }}人</div>
                        </div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/fenlei.png" alt="">
                            店铺桌数
                        </div>
                        <div>
                            <div>{{ shopInfoDetail.shopTables ? shopInfoDetail.shopTables + '桌' : "暂无信息" }}</div>
                        </div>
                    </div>
                    <div class=" detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/xingZhi.png" alt="">
                            店铺性质
                        </div>
                        <div>
                            <div v-for=" (item, index) in shopInfoDetail.targetList" :key="index">{{ item }}
                            </div>
                        </div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/status.png" alt="">
                            投放状态
                        </div>
                        <div
                            :class="shopInfoDetail.shopStatus == 1 ? 'redNum' : shopInfoDetail.shopStatus == 0 ? 'greenNum' : 'yellowNum'">
                            {{ shopInfoDetail.shopStatus == 1 ? '已投放' : shopInfoDetail.shopStatus == 0 ? '未投放' : '已占用'
                            }}
                        </div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/time.png" alt="">
                            投放时间
                        </div>
                        <div>{{ shopInfoDetail.startTime || '暂无数据' }}</div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/resTime.png" alt="">
                            到期时间
                        </div>
                        <div>{{ shopInfoDetail.endTime || '暂无数据' }}</div>
                    </div>
                </div>

                <div class="shopDetail" v-if="flag == 2">
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/shopName.png" alt="">
                            店铺名称
                        </div>
                        <div>{{ shopForm.shopName }}</div>
                    </div>
                    <div class=" infoTop">
                        <div>完善信息</div>
                        <div>
                            <div>
                                <img src="../../assets/advMobile/info/send.png" alt="">
                                广告安放图片
                            </div>
                            <van-uploader v-model="fileList" :after-read="afterRead" :max-count="1" />
                        </div>
                        <div>
                            <div>
                                <img src="../../assets/advMobile/info/send.png" alt="">
                                门店主属性
                            </div>
                            <input type="text" v-model="shopForm.shopTag" placeholder="请根据您的第一印象填写主属性">
                        </div>

                        <div>
                            <div>
                                <img src="../../assets/advMobile/info/send.png" alt="">
                                门店状态
                            </div>
                            <van-radio-group v-model="shopForm.shopStatus" direction="horizontal">
                                <van-radio name="1" icon-size="16px">正常营业</van-radio>
                                <van-radio name="0" icon-size="16px">已停业</van-radio>
                            </van-radio-group>
                        </div>
                    </div>

                    <div class="addressCon" v-if="!shopForm.isFirst">
                        <div>
                            <div>
                                <van-icon name="location" /> 当前不在门店范围内，距离门店还有{{ juliNum }}米
                            </div>
                            <span class="resBtn"> <van-icon name="aim" @click="getLocation" />重新定位</span>
                        </div>
                    </div>
                </div>

                <div class="touBtnBox" v-if="flag == 2">
                    <div>
                        <div @click="submitHandle" class="subBtn">
                            提交
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>


import myBMap from '../../utils/loadBMap'
import { listUserAdvShop } from '../../network/preparer'
import { listMyUserPut, listMyPutShop, searchShop, addUserVisit } from '../../network/mobile'
import { conditionList } from '../../utils/conditionList'
export default {
    name: 'HomeR',
    data() {
        return {
            sheetDia: false,// 投放弹窗
            searchShopName: '',//搜索店铺名

            myTouShopList: [],
            cusList: [],
            cusTableList: [],

            shopOldList: [],
            shopTableList: [],
            areaList: [],
            areaIds: '',

            selectAreaId: -1,

            shopUnAdvNum: 0,
            shopAdvNum: 0,
            shopZhanAdvNum: 0,
            shopInfoDetail: '',//门店详情

            flag: 1,// 1 详情 2 打卡

            shopForm: {
                shopName: '',
                shopId: '',
                shopTag: '',//
                shopStatus: '1',
                lng: '',
                lat: '',
                shopAddress: '',
                isFirst: true,//是否为首次维护门店经纬度
            },
            lng: '', //当前位置 经纬度
            lat: '',
            fileList: [],
            juliNum: 0,//  当前位置和门店的距离
            user: JSON.parse(localStorage.user),
            showTab: true,
            selectShopIndex: -1,//打卡选择的门店索引

        }
    },
    mounted() {
        this.setTitle()
    },
    methods: {


        submitHandle() {

            if (this.shopForm.isFirst) {
                this.shopForm.lng = this.lng
                this.shopForm.lat = this.lat
            }

            if (this.fileList.length == 0) {
                this.$message.warning('请上传广告安放图片')
                return
            }

            if (this.shopForm.shopTag == '') {
                this.$message.warning('请输入门店主属性')
                return
            }


            if (!this.shopForm.isFirst && this.juliNum > 100) {
                this.$message.warning('当前不在门店范围内')
                return
            }


            console.log(this.shopForm);
            console.log(this.fileList);

            // return

            let addF = new FormData();


            //  门店打卡  1 首次  0 非首次


            addF.append("file", this.fileList[0].file);
            addF.append("visitLat", this.shopForm.lat);
            addF.append("visitLng", this.shopForm.lng);
            addF.append("shopId", this.shopForm.shopId);
            addF.append("userId", localStorage.userId);
            addF.append("shopStatus", this.shopForm.shopStatus);
            addF.append("shopLabel", this.shopForm.shopTag);
            addF.append("visitApply", 0);
            addF.append("shopName", this.shopForm.shopName);
            addF.append("userName", this.user.userName);
            addF.append("isFirst", this.shopForm.isFirst ? '1' : '0');


            addUserVisit(addF).then(res => {
                console.log(res);
                // 添加成功
                if (res.flag) {
                    this.$message.success("打卡成功");

                    if (this.shopForm.isFirst) {
                        this.shopTableList[this.selectShopIndex].shopLng = this.shopForm.lng
                        this.shopTableList[this.selectShopIndex].shopLat = this.shopForm.lat
                    }




                    // 关闭弹窗
                    this.popTou()
                } else {
                    this.$message.success("打卡失败，请重试!");
                }
            });

            console.log(this.shopForm);
            console.log(this.fileList);
        },

        afterRead(file) {
            console.log(file);
        },

        searchHandle() {
            // 查询门店
            if (this.searchShopName == '') {
                this.shopTableList = this.shopOldList
            } else {
                this.shopTableList = this.shopOldList.filter(item => {
                    return item.shopName.includes(this.searchShopName)
                })
            }
            this.showTab = true

        },


        // 查看详情 打卡
        checkDetail(obj, index, flag) {

            console.log(obj);
            this.shopForm.isFirst = obj.shopLng == null || obj.shopLat == null

            if (flag == 2) {

                this.selectShopIndex = index
                if (!this.shopForm.isFirst) {
                    this.juliNum = this.juli(this.lat, this.lng, obj.shopLat, obj.shopLng)
                    this.shopForm.lng = obj.lng
                    this.shopForm.lat = obj.lat
                } else {
                    if (this.shopForm.isFirst) {
                        this.shopForm.lng = this.lng
                        this.shopForm.lat = this.lat
                    }
                }
                this.shopForm.shopId = obj.shopId
                this.shopForm.shopName = obj.shopName

            } else if (flag == 1) {

                this.shopInfoDetail = obj
            }
            console.log(obj);
            this.flag = flag
            this.sheetDia = true



            console.log(this.shopForm);
        },


        // 放置广告牌
        shopHandle(index) {


        },


        // 根据id 获取投放门店
        getShopList() {
            listMyPutShop({
                recordId: this.recordId || 1
            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    this.dataHandle(res.data)
                } else {
                    this.$message.warning('查询失败，请重试')
                }
            })
        },


        // 关闭投放弹窗
        popTou() {
            this.sheetDia = false
            if (this.flag == 2) {
                this.shopForm = {
                    shopName: '',
                    shopId: '',
                    shopTag: '',//
                    shopStatus: '1',
                    lng: '',
                    lat: '',
                    shopAddress: '',
                    isFirst: true,//是否为首次维护门店经纬度
                }
                this.fileList = []
            }
        },

        popN() {
        },
        toPage() {
            this.$router.replace('/geren')
        },
        setTitle() {
            document.title = '客户店铺信息'
            const i = document.createElement('iframe')
            i.src = '/favicon.ico'
            i.style.display = 'none'
            i.onload = function () {
                setTimeout(function () {
                    i.remove()
                }, 9)
            }
            document.body.appendChild(i)
        },


        getSaleShopData() {
            listUserAdvShop({
                userId: localStorage.userId
            }).then(res => {
                if (res.flag) {
                    this.shopOldList = JSON.parse(JSON.stringify(res.data.shops))
                    var arr = [{
                        text: '全部',
                        value: -1
                    }];
                    this.areaIds = ''
                    this.conditionList[0].list.forEach(item => {
                        res.data.area.forEach(ele => {
                            if (item.regionId == ele) {
                                arr.push({
                                    text: item.text,
                                    value: item.regionId
                                })
                                this.areaIds += ele + ','
                            }
                        })
                    })

                    this.areaList = arr

                    this.dataHandle(this.shopOldList)

                    console.log(this.areaIds);
                    console.log(arr);

                    console.log(res);
                    console.log(this.conditionList);
                }
            })
        },

        dataHandle(allShopList) {
            this.shopTableList = []


            this.shopAdvNum = 0
            this.shopUnAdvNum = 0
            this.shopZhanAdvNum = 0

            allShopList.forEach((ele, index) => {

                if (ele.shopStatus == 0) {
                    this.shopUnAdvNum++
                } else if (ele.shopStatus == 1) {
                    this.shopAdvNum++
                } else if (ele.shopStatus == 2) {
                    this.shopZhanAdvNum++
                }

                ele.shopTargetList = ele.shopTarget.split(',')
                ele.targetList = []
                ele.shopLevelText = ''
                ele.shopTargetList.forEach((target) => {
                    conditionList[1].list.forEach(con => {
                        if (target == con.targetId) {
                            ele.targetList.push(con.text)
                        }
                    })
                })

                conditionList[2].list.forEach(level => {
                    if (ele.shopLevel == level.levelId) {
                        ele.shopLevelText = level.text
                    }
                })
                ele.shopLevel = Number(ele.shopLevel)
            })


            this.shopTableList = [...allShopList]


            console.log(this.shopAdvNum);
            console.log(this.shopUnAdvNum);
            console.log(this.shopTableList);
        },



        // 选择区域
        selectArea() {
            console.log(this.selectAreaId);

            searchShop({
                shopRegions: this.selectAreaId == -1 ? this.areaIds : this.selectAreaId,
                shopTarget: '',
                shopLevels: '',
            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    this.shopOldList = JSON.parse(JSON.stringify(res.data.shops))
                    this.dataHandle(this.shopOldList)
                } else {
                    this.$message.warning('获取失败，请重试')
                }
            })
        },

        getLocation() {
            this.$message.success('定位中')
            myBMap.init().then(() => {
                let that = this;
                let geolocation = new BMap.Geolocation();
                // 创建百度地理位置实例，代替 navigator.geolocation
                geolocation.getCurrentPosition(function (e) {
                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                        // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
                        let point = new BMap.Point(e.point.lng, e.point.lat);
                        let gc = new BMap.Geocoder();
                        gc.getLocation(point, function (rs) {
                            console.log(rs);
                            that.lng = rs.point.lng
                            that.lat = rs.point.lat
                            that.shopForm.shopAddress = rs.address
                        });
                    } else {
                        that.$message.warning("定位失败，请手动重新定位");
                    }
                });
            });
        },

        inputHandle(flag) {
            this.showTab = flag
        },

        //计算两点之间的距离
        juli(lat1, lng1, lat2, lng2) {
            var radLat1 = lat1 * Math.PI / 180.0;
            var radLat2 = lat2 * Math.PI / 180.0;
            var a = radLat1 - radLat2;
            var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
            var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
            s = s * 6378.137;
            s = Math.round(s * 10000) / 10000;
            return s * 1000
        },



    },
    created() {
        this.getLocation()
        this.conditionList = JSON.parse(JSON.stringify(conditionList))//筛选条件
        this.getSaleShopData()
    },

    filters: {
        getRegion(val) {
            var name = ''
            conditionList[0].list.forEach(item => {
                if (val == item.regionId) {
                    name = item.text
                }
            })
            return name
        }
    },
}





</script>





<style lang='less' scoped>
.pageCon {
    box-sizing: border-box;
    padding: 100px 0 98px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    overflow: scroll;
    box-sizing: border-box;
}


.searchBox {
    position: fixed;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px 32px 20px 30px;
    width: 100%;
    background-color: #fff;
    z-index: 10;
}

.searchBox1 {
    position: relative !important;
}

.searchIcon {
    position: absolute;
    top: 36px;
    left: 178px;
    font-size: 32px;
    color: #666666;
}

.searchBox>input {
    // width: 520px;
    margin: 0 20px;
    flex: 1;
    height: 60px;
    background: #F2F2F2;
    border-radius: 30px;
    box-sizing: border-box;
    padding-left: 66px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 28px;
    color: #666666;
    border: none;
}

.searchBox>span {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 28px;
    color: #3C80DE;
}


/deep/ .van-dropdown-menu {
    width: 100px !important;
    height: 60px !important;

}

/deep/ .van-dropdown-menu__bar {
    height: 60px !important;
    box-shadow: none !important;
}


/deep/ .van-dropdown-item--down {
    background-color: rgba(0, 0, 0, .6) !important;
}


.itemBox>div>img {
    margin-right: 2px;
    width: 28px;
    height: 28px;
}

.tipIcon {
    font-size: 32px;
    margin-right: 10px;
}



.pageTab {
    box-sizing: border-box;
    position: relative;
    padding: 28px 74px 28px 70px;
    width: 100%;
    border-bottom: 2px solid #f2f2f2;
}


.pageTab>div>div:first-child {
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 28px;
    color: #333333;
}

.pageTab>div>div:first-child>span {
    margin-left: 4px;
    font-size: 20px;
}


.pageTab>div>div:not(:first-child) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 416px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #858B90;
}

.pageTab>div>div:nth-child(2) {
    margin: 12px 0 10px;
}


.checkBtn {
    position: absolute;
    top: 74px;
    right: 74px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #3C80DE;
}


.hasFang {
    color: #999999 !important;
}


.pageBottomBox {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: auto
}

.navBox {
    // position: fixed;
    // bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 750px;
    height: 98px;
    background: #FFFFFF;
    border-top: 2px solid #f2f2f2;
    z-index: 10;

}


.navBox>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 22px;
    color: #9A9A9A;
}

.navBox>div>img {
    margin-bottom: 4px;
    width: 42px;
    height: 38px;
}

.navBox>div:last-child>img {
    margin-bottom: 4px;
    width: 36px;
    height: 42px;
}

.navBox>div:first-child {
    color: #333;
}





.touBox {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .3);
    z-index: 40;
    overflow: hidden;
}

.hidenTouBox {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 100vw;
    height: 0px;
    z-index: 40;
    overflow: hidden;
    transition: height .2s;
}

.touBox>div {
    height: calc(100vh - 486px);
    transition: height .2s;
}

.hidenTouBox>div {
    height: 0px;
    transition: height .2s;
}

.touCon {
    position: absolute;
    bottom: 0px;
    width: 750px;
    height: calc(100vh - 110px) !important;
    background: #FFFFFF;
    border-radius: 30px 30px 0px 0px;
    transition: height .2s;
}


.touTop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 110px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    font-size: 32px;
    color: #000000;
}

.closeIcon {
    position: absolute;
    top: 40px;
    right: 38px;

}






.resBox {
    display: flex;
    flex-direction: column;

    box-sizing: border-box;
    padding: 0 30px 10px;
    width: 100%;
    height: calc(100% - 240px);
    overflow-y: scroll;
}

.resBox1 {
    height: calc(100% - 134px) !important;
}

.resTop {
    width: 690px;
    background: #FAFAFA;
    border-radius: 20px 20px 0px 0px;
}

.resTop>div:first-child {
    box-sizing: border-box;
    padding: 40px 0 28px 40px;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-bottom: 2px solid rgba(153, 153, 153, .07);
    font-weight: 400;
    font-size: 28px;
    color: #333333;
}

.resTop>div:first-child>div {
    display: flex;
    align-items: center;
    margin: 30px 0px 20px;
}

.resTop>div:first-child>div>img {
    margin-right: 12px;
    width: 26px;
    height: 26px;
}

.resTop>div:first-child>span:last-child {
    font-size: 36px !important;
    font-weight: bold !important;
}



.emptyBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    font-size: 28px;
}

.emptyBox>img {
    margin-top: 200px;
    width: 374px;
    height: 314px;
}


.myTabBox {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    flex: 1;
    border-radius: 20px;
    border: 2px solid #FAFAFA;
    overflow-y: scroll;
}

.myTabBox>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 30px;
}

.myTabTop {
    position: sticky;
    top: -2px;
    width: 100%;
    height: 72px;
    background: #FAFAFA;
    border-radius: 20px 20px 0px 0px;
    font-weight: 400;
    font-size: 28px;
    color: #999999;
}


.myTabTop>div:first-child,
.myTabMain>div:first-child {
    width: 170px;
}

.myTabTop>div:nth-child(2),
.myTabMain>div:nth-child(2) {
    width: 110px;
}

.myTabTop>div:nth-child(3),
.myTabMain>div:nth-child(3) {
    width: 138px;
}

.myTabTop>div:nth-child(4),
.myTabMain>div:nth-child(4) {
    width: 100px;
    text-align: center;
    // background: #03C295;
}

.myTabTop>div:nth-child(5),
.myTabMain>div:nth-child(5) {
    text-align: right;
    width: 120px;
    // background-color: #3C80DE;
}

.myTabMain>div {
    padding: 28px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 400;
    font-size: 24px;
    color: #333333;
}

.myTabMain>div:not(:last-child) {
    border-bottom: 2px solid #fafafa;
}

.myTabMain>div:nth-child(3) {
    width: 158px;
}

.myTabMain>div:nth-child(5) {
    color: #3C80DE !important;
}

.myTabMain>div:nth-child(4) {
    width: 100px;
    text-align: center;
    color: #70A06A;
}

.redNum {
    color: #C20330 !important;
}

.greenNum {
    color: #03C295 !important;
}

.yellowNum {
    color: #F6C349 !important;
}


.shopDetail {
    box-sizing: border-box;
    padding: 0 30px;
    width: 100%;
    height: calc(100% - 110px);
    overflow-y: scroll;
    // background-color: #3C80DE
}

.detailItem {
    display: flex;
    align-items: center;
    padding: 40px 0px;
    width: 100%;

}

.detailItem>div:first-child {
    display: flex;
    align-items: center;
    width: 246px;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
}

.detailItem>div:first-child>img {
    margin-right: 22px;
    width: 38px;
    height: 38px;
}

.detailItem>div:last-child {
    position: relative;
    flex: 1;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
}

.detailItem>div:last-child>span {
    position: absolute;
    right: 0px;
    font-weight: 400;
    font-size: 30px;
    color: #CCCCCC;
}

.detailItem:not(:last-child) {
    border-bottom: 2px solid rgba(153, 153, 153, .07);
}


.bottomBox {
    margin-bottom: 20px;
    box-sizing: border-box;
    padding: 28px 28px 32px 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    background-color: #fafafa;
    border-radius: 30px;
}

.itemBox {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    font-size: 32px;
    color: #3C80DE;
}

.itemBox>div {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 28px !important;
}

.bottomBox>.itemBox:nth-child(2) {
    color: #c20330;
}

.bottomBox>.itemBox:nth-child(3) {
    color: #70a06a;
}

.bottomBox>.itemBox:nth-child(4) {
    color: #F6C349;
}

.btnItem {
    margin-right: 16px;
}


.infoTop {
    box-sizing: border-box;
    padding: 36px 0px 14px;
    width: 100%;
    // height: 550px;
    background: #FFFFFF;
    border-radius: 0 0 30px 30px;
    // background-color: #03C295;
}

.infoTop>div:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-weight: bold;
    font-size: 28px;
    color: #333333;
}

.infoTop>div:first-child::after,
.infoTop>div:first-child::before {
    margin: 0 42px;
    content: '';
    width: 14px;
    height: 4px;
    background: #3D80DD;
    border-radius: 2px;
}

.infoTop>div:not(:first-child) {
    position: relative;
    padding: 40px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #f2f2f2;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
}

.infoTop>div:not(:first-child)>div>img {
    margin-right: 16px;
    width: 26px;
    height: 27px;
}

.resBtn {
    color: #3C80DE !important;
}

.addressCon {
    width: 100%;
    // background-color: #03C295;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
    position: relative;
    padding: 40px 0;
    width: 100%;
    border-top: 2px solid #f2f2f2;


}

.addressCon>div:first-child {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.addressCon>div:first-child>div>img {
    margin-right: 16px;
    width: 28px;
    height: 28px;
}

.addressCon>div:last-child {
    margin-top: 20px;
}

.infoTop>div>input {
    width: 60%;
    text-align: right;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 26px;
    color: #666666;
    border: none;
}

.infoTop>div>input::-webkit-input-placeholder {
    font-size: 26px;
    color: #CCCCCC;
}

.infoTop>div:last-child {
    border-bottom: none;
}


.touBtnBox {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0px;
    width: 750px;
    height: 130px;
    background: #FFFFFF;
    box-shadow: 0px 1px 8px 0px rgba(51, 51, 51, 0.12);
    border-radius: 0px 0px 0px 20px;
    z-index: 20;


}

.touBtnBox>div {
    box-sizing: border-box;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 690px;
    height: 86px;
    background: #3C80DE;
    box-shadow: 0px 1px 8px 0px rgba(51, 51, 51, 0.12);
    border-radius: 20px;
}

.touBtnBox>div>div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    font-size: 32px;
    color: #FFFFFF;
}

.shopLable1 {
    color: #ff7a21 !important;
}
</style>